<template>
	<view class="personal-data">
		<view class="list">
			<view class="info-item avatar">
				<text class="title">头像</text>
				<view class="value" @tap="chooseImgs">
					<image class="img" :src="userInfo.headimgurl"></image>
					<text class="more"></text>
				</view>
			</view>
			<view class="info-item">
				<text class="title">昵称</text>
				<input type="text" class="value" placeholder="请输入昵称" v-model="userInfo.nick_name">
			</view>
			<view v-if="userInfo.phone_no" class="info-item" @tap="changeMobile">
				<text class="title">更改手机号</text>
				<view class="value">
					{{userInfo.phone_no || ''}}
				</view>
			</view>
			<button v-else class="info-item" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				<text class="title">绑定手机号</text>
				<view class="value"></view>
			</button>
			<view class="info-item">
				<text class="title">生日</text>
				<picker mode="date" class="value" @change="selectBirthday">
					<view class="uni-input">{{userInfo.birthday || '请选择'}}</view>
				</picker>
			</view>
			<view class="info-item">
				<text class="title">身高</text>
				<picker mode="selector" class="value" :range="heights" @change="selectHeight">
					<view class="uni-input">{{userInfo.height ? userInfo.height+'cm' : '请选择'}}</view>
				</picker>
			</view>
			<view class="info-item">
				<text class="title">体重</text>
				<picker mode="selector" class="value" :range="weights" @change="selectWeight">
					<view class="uni-input">{{userInfo.weight ? userInfo.weight+'kg' : '请选择'}}</view>
				</picker>
			</view>
			<view class="info-item">
				<text class="title">胸围</text>
				<picker mode="selector" class="value" :range="busts" @change="selectBusts">
					<view class="uni-input">{{userInfo.bust ? userInfo.bust : '请选择'}}</view>
				</picker>
			</view>
			<view class="info-item">
				<text class="title">腰围</text>
				<picker mode="selector" class="value" :range="waistlines" @change="selectWaistlines">
					<view class="uni-input">{{userInfo.waistline ? userInfo.waistline+' cm(尺)' : '请选择'}}</view>
				</picker>
			</view>
			<view class="info-item">
				<text class="title">衣码</text>
				<picker mode="selector" class="value" :range="clothingSizes" @change="selectCothingSize">
					<view class="uni-input">{{userInfo.clothing_size || '请选择'}}</view>
				</picker>
			</view>
			<view class="info-item">
				<text class="title">鞋码</text>
				<picker mode="selector" class="value" :range="shoeSizes" @change="selectShoeSize">
					<view class="uni-input">{{userInfo.shoe_size || '请选择'}}</view>
				</picker>
			</view>
			<view class="info-item">
				<text class="title">穿衣风格</text>
				<picker mode="selector" class="value" :range="clothingStyles" @change="selectClothingStyle">
					<view class="uni-input">{{userInfo.clothing_style || '请选择'}}</view>
				</picker>
			</view>
			<view class="info-item">
				<text class="title">衣服颜色</text>
				<input type="text" class="value" placeholder="自填" v-model="userInfo.clothing_color">
			</view>
		</view>
		<view class="btn" @tap.stop='editUserInfo'>保存信息</view>
	</view>
</template>

<script>
	import storage from '@/commen/utils/storage'
	import {
		editUserinfo,
		bindPhone,
		getUserInfo
	} from '@/commen/js/config'

	export default {
		data() {
			return {
				userInfo: {}, // 用户信息
				heights: [140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160,
					161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183,
					184, 185, 186, 187, 188, 189, 190
				],
				weights: [30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55,
					56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83,
					84, 85, 86, 87, 88, 89, 90
				],
				clothingSizes: ['XS', 'X', 'M', 'L', 'XL', 'XXL', 'XXXL'],
				shoeSizes: [33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45],
				clothingStyles: ['可爱', '萝莉', '清纯', '淑女', '素简', '御姐', '通勤', '休闲', '北欧', '复古', '轻淑', '成熟'],
				busts: ['A-', 'A', 'B', 'C', 'D', 'E', 'F', 'G'],
				waistlines: ['64-67(1尺9-2尺)','68-71(2尺-2尺1)','72-75(2尺1-2尺2)','76-79(2尺2-2尺3)','80-83(2尺3-2尺4)','84-87(2尺4-2尺5)']
			};
		},
		onLoad() {
			this.getUserInfo()
			this.listenerEvent()
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				this.userInfo = storage.get('userinfo')
			},
			// 更改手机号
			changeMobile() {
				this.$open('/pages/mine/verify-mobile/verify-mobile', {
					mobile: this.userInfo.phone_no
				})
			},
			// 选择生日
			selectBirthday(e) {
				this.userInfo.birthday = e.detail.value
			},
			// 选择身高
			selectHeight(e) {
				this.userInfo.height = this.heights[e.detail.value]
			},
			// 选择体重
			selectWeight(e) {
				this.userInfo.weight = this.weights[e.detail.value]
			},
			// 选择衣码
			selectCothingSize(e) {
				this.userInfo.clothing_size = this.clothingSizes[e.detail.value]
			},
			// 选择鞋码
			selectShoeSize(e) {
				this.userInfo.shoe_size = this.shoeSizes[e.detail.value]
			},
			// 选择穿衣风格
			selectClothingStyle(e) {
				this.userInfo.clothing_style = this.clothingStyles[e.detail.value]
			},
			// 选择胸围
			selectBusts(e) {
				this.userInfo.bust = this.busts[e.detail.value]
			},
			// 选择腰围
			selectWaistlines(e) {
				this.userInfo.waistline = this.waistlines[e.detail.value]
			},
			// 获取个人手机号
			async getUserMobile() {
				const params = {
					token: storage.get('token')
				}
				const [err, res] = await getUserInfo(params)
				if (res && res.info) {
					this.userInfo.phone_no = res.info.phone_no
					storage.set('phone_no', res.info.phone_no, 'userinfo')
					uni.$emit('refreshPhone')
				}
			},
			// 获取用户手机号
			async getPhoneNumber(e) {
				if (!e || !e.detail) return
				const params = {
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv,
					token: storage.get('token')
				}
				const [err, res] = await bindPhone(params)
				if (res) {
					this.$toast('绑定成功')
					this.getUserMobile()
					uni.$emit('refreshUserInfo')
				}
			},
			// 上传图片
			async chooseImgs() {
				const [err1, imgArr] = await this.$chooseImgs(1)
				if (imgArr) {
					const [err, res] = await new Promise((resolve, reject) => {
						uni.uploadFile({
							url: 'https://yizhimao.onebity.com/api/ImageUpload',
							filePath: imgArr[0],
							name: 'file',
							success: (uploadFileRes) => {
								resolve(uploadFileRes.data)
							},
							fail: (err) => {
								reject(err)
							}
						});
					}).then(res => [err, res]).catch(err => [err])
					if (res) {
						this.userInfo.headimgurl = res
					}
				}
			},
			// 修改用户信息
			async editUserInfo(info) {
				let params = {
					token: storage.get('token') || '',
					nick_name: this.userInfo.nick_name || '',
					headimgurl: this.userInfo.headimgurl || '',
					birthday: this.userInfo.birthday || '',
					height: this.userInfo.height || '',
					weight: this.userInfo.weight || '',
					clothing_size: this.userInfo.clothing_size || '',
					shoe_size: this.userInfo.shoe_size || '',
					clothing_style: this.userInfo.clothing_style || '',
					clothing_color: this.userInfo.clothing_color || '',
					bust: this.userInfo.bust || '',
					waistline: this.userInfo.waistline || '',
				}
				const [err, res] = await editUserinfo(params)
				if (res) {
					this.$toast(res.msg)
					storage.set('userinfo', this.userInfo)
					uni.$emit('refreshUserInfo')
					this.getUserInfo()
				}
			},
			// 监听自定义事件
			listenerEvent() {
				uni.$on('refreshPhone', () => {
					this.getUserInfo()
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';

	.personal-data {
		@include box-w(100%, $bg-g);

		.list {
			@include box-w(100%, $bg-c);
			margin-top: 10rpx;
			padding: 0 32rpx;

			.info-item {
				@include box-h(100rpx);
				@include flex-row(space-between);
				padding: 0;

				&.avatar {
					height: 142rpx;
				}

				&~.info-item {
					border-top: 2rpx solid $bg-d;
				}

				.title {
					@include font-set($font-b, $color-c);
				}

				.value {
					@include box(300rpx, 100%);
					@include flex-row(flex-end);
					@include font-set($font-b, $color-g);
					text-align: right;
					padding-right: 20rpx;

					image {
						@include circle(80rpx);
					}

					.uni-input {
						@include box(500rpx, 100rpx);
						@include font-set($font-b, $color-g);
						line-height: 100rpx;
					}
				}

				.more {
					margin-left: 28rpx;
					@include box-bg(12rpx,
					22rpx,
					''
					);
				}
			}
		}

		.btn {
			@include box(300rpx, 80rpx, $bg-a);
			@include flex-row();
			@include font-set($font-a, $color-a);
			margin: 50rpx auto;
			border-radius: 10px;
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.3);
			letter-spacing: 4rpx;
		}
	}
</style>
